<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :fullscreen="isFullscreen"
    :visible="dialogVisible"
    v-if="dialogVisible"
    :before-close="closeForm"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>
      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      class="demo-form-inline"
      label-width="120px"
    >
      <el-row :gutter="10">
        <el-col>
          <el-form-item prop="company_name" label="客户简称">
            <el-input
              placeholder="客户简称"
              v-model="form.company_name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="company_full_name" label="客户全称">
            <el-input
              placeholder="客户全称"
              v-model="form.company_msg.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="address" label="客户地址">
            <el-input
              placeholder="客户地址"
              v-model="form.company_msg.address"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="company_contact" label="公司负责人姓名">
            <el-input
              placeholder="公司负责人姓名"
              v-model="form.director_msg.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="company_Tel" label="公司负责人电话">
            <el-input
              placeholder="公司负责人电话"
              v-model="form.director_msg.telephone"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="company_Email" label="公司负责人邮箱">
            <el-input
              placeholder="公司负责人邮箱"
              v-model="form.director_msg.email"
            ></el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col>-->
        <!--          <el-form-item prop="financial_contact" label="财务联系人姓名">-->
        <!--            <el-input-->
        <!--              placeholder="财务联系人姓名"-->
        <!--              v-model="form.finance_msg.name"-->
        <!--            ></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col>-->
        <!--          <el-form-item prop="financial_Tel" label="财务联系人电话">-->
        <!--            <el-input-->
        <!--              placeholder="财务联系人电话"-->
        <!--              v-model="form.finance_msg.telephone"-->
        <!--            ></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col>-->
        <!--          <el-form-item prop="financial_Email" label="财务联系人邮箱">-->
        <!--            <el-input-->
        <!--              placeholder="财务联系人邮箱"-->
        <!--              v-model="form.finance_msg.email"-->
        <!--            ></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col>
          <el-form-item prop="settlement_type" label="请选择结算类型">
            <el-select
              style="display: block"
              clearable
              disabled
              v-model="form.settlement_type"
              placeholder="请选择结算类型"
            >
              <el-option
                v-for="(item, index) in SettlementTypeList"
                :key="index"
                :value="item.val"
                :label="item.key"
              ></el-option>
            </el-select>
            <template v-if="form.settlement_type === 'week'">
              <el-select
                style="display: block"
                disabled
                v-model="form.settlement_value"
                placeholder="请选择星期几结算"
                :clearable="true"
              >
                <el-option
                  v-for="(item, index) in weekData"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </template>

            <template v-else-if="form.settlement_type === 'month'">
              <span>每月结算日:</span>
              <el-input-number
                disabled
                v-model="form.settlement_value"
                :min="1"
                :max="31"
              ></el-input-number>
            </template>
            <template v-else-if="form.settlement_type === 'day'">
              <el-input
                disabled
                class="month_input"
                v-model="form.settlement_value"
                placeholder="请输入结算周期天数"
                :clearable="true"
              ></el-input>
              <el-date-picker
                style="width: 100%"
                v-if="form.settlement_type === 'day'"
                v-model="form.settlement_start"
                align="right"
                type="date"
                placeholder="选择开始计算日期"
                value-format="timestamp"
                :clearable="true"
                disabled
              >
              </el-date-picker>
            </template>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="saler" label="销售人名">
            <el-input placeholder="销售人名" v-model="form.saler"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="kr_agent" label="韩国代理人名">
            <el-input
              placeholder="韩国代理人名"
              v-model="form.kr_agent"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 20px; text-align: left">
          <span style="font-size: 14px; margin-left: 30px">营业执照：</span>
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="picUpload"
            :show-file-list="false"
            :auto-upload="true"
          >
            <img v-if="form.company_msg" :src="baseUrl+form.company_msg.license" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
      <el-form-item style="text-align: center; margin-top: 50px">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// import { getAreaList, getSettlementType, uploadImage } from "@/api/user";
import { getSettlementType } from "@/api/base";
import { uploadImage } from "@/api/user";

export default {
  name: "customModule",
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      baseUrl:  process.env.NODE_ENV == "development"
          ? "http://membe.e-kc.com/"
          : "https://membe.e-kc.vip/",
      fileList: [],
      imageUrl: "",
      isFullscreen: false,
      tableData: [],
      form: {},
      rules: {},
      dialogImageUrl: "",
      disabled: false,
      multipleSelection: [],
      AreaList: [],
      SettlementTypeList: [],
      file: null,
      weekData: [
        {
          label: "星期一",
          value: 1,
        },
        {
          label: "星期二",
          value: 2,
        },
        {
          label: "星期三",
          value: 3,
        },
        {
          label: "星期四",
          value: 4,
        },
        {
          label: "星期五",
          value: 5,
        },
        {
          label: "星期六",
          value: 6,
        },
        {
          label: "星期天",
          value: 7,
        },
      ],
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.form = val;
      },
    },
    dialogVisible: {
      handler() {
        this.getSettlementType();
      },
    },
  },
  methods: {
    //获取结算方式
    getSettlementType() {
      getSettlementType().then((res) => {
        if (res.data.status === 200) {
          this.SettlementTypeList = res.data.data;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submit", this.form);
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.tableData = [];
        this.$refs["form"].resetFields();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    async picUpload(f) {
      let params = new FormData();
      // //注意在这里一个坑f.file
      params.append("file", f.file);
      const resp = await uploadImage(params);
      console.log(resp);
      //这里返回的是头像的url
      if (resp.data.status === 200) {
        this.form.pic = resp.data.data;
        this.form.company_msg.license = resp.data.data;
        this.$forceUpdate();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 15px 10%;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

//表格样式
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 36px;
}

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}

::v-deep .el-drawer__body {
  padding: 0 10%;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}

::v-deep .el-upload--picture-card {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
  line-height: 120px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px dashed #eee;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  margin-bottom: 20px;
}

::v-deep .el-upload {
  margin-left: 120px;
}

::v-deep .el-dialog {
  margin-top: 7vh !important;
}
</style>
